<template>
	<div>
		<header class="short-header">

			<div class="gradient-block"> </div>

			<div>

				<!-- 网页名 -->
				<router-link tag="div" to="/about/" exact class="logoname">South</router-link>


				<!-- 搜索框 -->
				<!-- <Input v-model="input3" icon="ios-clock-outline" placeholder="Enter something..." style="width: 200px" @on-click="search" /> -->
				<!-- <Input @on-click='search' type='Title' v-model='input3' search style="left: 25px; width: 400px; top: 20px; height: 20px;"  placeholder="请输入景区/书籍/记录片" /> -->
				<el-input placeholder="请输入景区/书籍/记录片" v-model="input3" style='width: 20%; left: 2% ; top: 20px; float: left; ' type='small'>
				</el-input>
				<router-link to="/searchresult/">
					<el-button icon="el-icon-search" style='margin-top: 20px; margin-left: 2%;  padding: 5px 5px; height: 40px;'
					@click='search()'></el-button>
				</router-link>
				<!-- 导航栏 -->
				<nav id="main-nav-wrap" class="guide">

					<ul class="main-navigation sf-menu">
						<router-link tag="li" to="/" exact><a>主页</a></router-link>
						<!-- <li class="current"></li> -->
						<router-link tag="li" to="/book/"><a>书籍</a></router-link>
						<router-link tag="li" to="/movie/"><a>纪录片</a></router-link>
						<router-link tag="li" to="/statistics/">
							<li><a>数据中心</a></li>
						</router-link>
						<router-link tag="li" to="/about/">
							<li><a>关于</a></li>
						</router-link>
						<!-- <router-link tag="li" to="/person/">
							<li><a>个人中心</a></li>
						</router-link> -->

					</ul>

				</nav>


				<!-- 图标 -->
				<div class="triggers" style="right: 10px;top: 20px;">


					<el-dropdown>
						<span class="el-dropdown-link">
							<Avatar style="background-color: #87d068" icon="ios-person" />
							<Icon type="ios-arrow-down"></Icon>
						</span>
						<el-dropdown-menu slot="dropdown">
							<router-link v-if="this.$store.state.user.loginUp" to="/person/">
								<el-dropdown-item>个人中心</el-dropdown-item>
							</router-link>
							<router-link v-if="this.$store.state.user.loginUp" to="/passwd/">
								<el-dropdown-item>修改密码</el-dropdown-item>
							</router-link>
							<router-link v-if="!this.$store.state.user.loginUp" to="/login/">
								<el-dropdown-item>登录</el-dropdown-item>
							</router-link>
							<router-link v-if="!this.$store.state.user.loginUp" to="/register/">
								<el-dropdown-item>注册</el-dropdown-item>
							</router-link>
						</el-dropdown-menu>
					</el-dropdown>

				</div>

			</div>

		</header> <!-- end header -->
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'Guide',
		data() {
			return {
				// user_status: this.$store.state.user.loginUp,
				// user_status1: true,
				activeIndex: '1',
				activeIndex2: '1',
				modal1: false,
				value: '',
				input3: ''
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			ok() {
				this.$Message.info('Clicked ok');
			},
			cancel() {
				this.$Message.info('Clicked cancel');
			},
			search() {
				console.log(this.input3)
			}

		},
		watch:{
			user_status(newname, oldname) {
				oldname
				this.user_status = newname
			}
		}
	}
</script>

<style>
	.short-header {
		height: 80px;
	}

	.logoname {
		font-family: 华文行楷;
		font-size: 70px;
		padding-left: 40px;
		color: #000000;
		float: left;
		padding-top: 20px;
	}

	.guide {
		padding-top: 15px;
	}

	

</style>
